<template>
    <el-menu
        :default-openeds="opens"
        style="min-height: 100%; overflwo-x: hidden"
        background-color="rgb(48,65,86)"
        text-color="#fff"
        active-text-color="#ffd04b"
        :collapse-transition="false"
        :collapse="isCollapse"
        router
      >
        <div style="height: 60px; line-height: 60px; text-align: center">
          <img src="../assets/favicon.png" alt="" style="width: 30px; position: relative; top: 5px; margin-right: 5px"/>
          <span style="color: white; font-size:28px;font-weight:900;font-family:'楷体';font-style:italic;" v-show="logoTextShow">幸福花店</span>
        </div>

        <div v-for="item in menus" :key="item.id">
          <div v-if="item.path">
            <el-menu-item :index="item.path">
              <i :class="item.icon"></i>
              <span slot="title">{{ item.name }}</span>
            </el-menu-item>
          </div>
          <div v-else>
            <el-submenu :index="item.id + ''">
              <template slot="title">
                <i :class="item.icon"></i>
                <span slot="title">{{ item.name }}</span>
              </template>
              <div v-for="subItem in item.children" :key="subItem.id">
                <el-menu-item :index="subItem.path">
                 <template slot="title">
                  <i :class="subItem.icon"></i>
                  <span slot="title">{{ subItem.name}}</span>
                 </template>
              </el-menu-item>
              </div>
            </el-submenu>
          </div>
        </div>

        <!-- <el-menu-item index="home">
          <template >
            <i class="el-icon-house"></i>
            <span slot="title">主页</span>
          </template>
        </el-menu-item>

        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-goods"></i>
            <span slot="title">商品管理</span>
          </template>
          <el-menu-item index="flower">
          <template slot="title">
            <i class="el-icon-dessert"></i>
            <span slot="title">鲜花管理</span>
          </template>
          </el-menu-item>
          <el-menu-item index="category">
          <template slot="title">
            <i class="el-icon-money"></i>
            <span slot="title">分类管理</span>
          </template>
          </el-menu-item>
          <el-menu-item index="setmeal">
          <template slot="title">
            <i class="el-icon-tickets"></i>
            <span slot="title">套餐管理</span>
          </template>
          </el-menu-item>
        </el-submenu>

        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-user"></i>
            <span slot="title">系统管理</span>
          </template>
          <el-menu-item index="user">
          <template slot="title">
            <i class="el-icon-s-custom"></i>
            <span slot="title">用户管理</span>
          </template>
          </el-menu-item>
          <el-menu-item index="role">
          <template slot="title">
            <i class="el-icon-burger"></i>
            <span slot="title">角色管理</span>
          </template>
          </el-menu-item>
          <el-menu-item index="menu">
          <template slot="title">
            <i class="el-icon-postcard"></i>
            <span slot="title">菜单管理</span>
          </template>
          </el-menu-item>
        </el-submenu>

        <el-menu-item index="orders">
          <template >
            <i class="el-icon-document-checked"></i>
            <span slot="title">订单管理</span>
          </template>
        </el-menu-item> -->
    </el-menu>
</template>

<script>
export default {
    name: 'Aside',
    props:{
        isCollapse: Boolean,
        logoTextShow: Boolean,
    },
    data(){
      return {
        menus: localStorage.getItem("menus") ? JSON.parse(localStorage.getItem("menus")) : [],
        opens: localStorage.getItem("menus") ? JSON.parse(localStorage.getItem("menus")).map(v => v.id + '') : [],
      }
    }
};
</script>

<style lang="scss" scoped>

</style>